<template>
  <div class="content-wrapper">
    <AvicSplit>
      <AvicPane size="250px">
        <BpmModelTree @onModelTreeSelect="onModelTreeSelect" />
      </AvicPane>
      <AvicPane>
        <a-tabs v-model:value="tabSelected" default-active-key="1" class="avic-content-tab" @change="reloadFocusedTask">
          <a-tab-pane key="1" :force-render="true">
            <template #tab>
              <span>
                我的草稿
                <a-tag>{{ DraftCount }}</a-tag>
              </span>
            </template>
            <MyDraft
              v-if="tabDraftLoad || tabSelected == 1"
              ref="myDraft"
              :params="selectedTreeNode"
              @getMyProcessCount="getMyProcessCount"
            />
          </a-tab-pane>
          <a-tab-pane key="2" :force-render="true">
            <template #tab>
              <span>
                我的申请
                <a-tag>{{ ApplicationCount }}</a-tag>
              </span>
            </template>
            <MyApplication
              v-if="tabApplicationLoad || tabSelected == 2"
              ref="tomyApplicationRead"
              :params="selectedTreeNode"
              @getMyProcessCount="getMyProcessCount"
            />
          </a-tab-pane>
          <a-tab-pane key="3" :force-render="true">
            <template #tab>
              <span>
                我的经办
                <a-tag>{{ ManagementCount }}</a-tag>
              </span>
            </template>
            <MyManagement
              v-if="tabManagementLoad || tabSelected == 3"
              ref="myManagement"
              :params="selectedTreeNode"
              @getMyProcessCount="getMyProcessCount"
            />
          </a-tab-pane>
        </a-tabs>
      </AvicPane>
    </AvicSplit>
  </div>
</template>
<script lang="ts" setup>
import { searchMyProcessCount } from '@/api/avic/bpm/BpmTaskApi';
import BpmModelTree from '../component/BpmModelTree.vue';
import MyDraft from './MyDraft.vue';
import MyApplication from './MyApplication.vue';
import MyManagement from './MyManagement.vue';
import type { treeParams } from '../types';

const tabSelected = ref<number>(1);
const tabDraftLoad = ref(true);
const tabApplicationLoad = ref(false);
const tabManagementLoad = ref(false);
const myDraft = ref(null);
const tomyApplicationRead = ref(null);
const myManagement = ref(null);

const selectedTreeNode = reactive<treeParams>({
  nodeId: '',
  nodeType: ''
});
const data = reactive({
  DraftCount: '',
  ApplicationCount: '',
  ManagementCount: ''
});
const { DraftCount, ApplicationCount, ManagementCount } = toRefs(data);

onMounted(() => {
  window.bpmOperatorRefresh = () => {
    myDraft.value.bpmOperatorRefresh();
    tomyApplicationRead.value.bpmOperatorRefresh();
    myManagement.value.bpmOperatorRefresh();
  };
});
onBeforeUnmount(() => {
  window.bpmOperatorRefresh = null;
});

function onModelTreeSelect(node: treeParams) {
  selectedTreeNode.nodeId = node.nodeId;
  selectedTreeNode.nodeType = node.nodeType;
  if (node.nodeId && node.nodeId) {
    getMyProcessCount();
  } else {
    data.DraftCount = '0';
    data.ApplicationCount = '0';
    data.ManagementCount = '0';
  }

  if (tabSelected.value !== 1) {
    tabDraftLoad.value = false;
  }
  if (tabSelected.value !== 2) {
    tabApplicationLoad.value = false;
  }
  if (tabSelected.value !== 3) {
    tabManagementLoad.value = false;
  }
}

function reloadFocusedTask(activeKey) {
  tabSelected.value = activeKey;
  if (activeKey === 1) {
    tabDraftLoad.value = true;
  } else if (activeKey === 2) {
    tabApplicationLoad.value = true;
  } else if (activeKey === 3) {
    tabManagementLoad.value = true;
  }
}

function getMyProcessCount() {
  searchMyProcessCount(selectedTreeNode)
    .then((response: any) => {
      data.DraftCount = response.data.myDraftCount || '0';
      data.ApplicationCount = response.data.myApplicationCount || '0';
      data.ManagementCount = response.data.myManagementCount || '0';
    })
    .catch(() => {
      data.DraftCount = '0';
      data.ApplicationCount = '0';
      data.ManagementCount = '0';
    });
}
</script>
<style lang="less" scoped>
:deep(.ant-badge) {
  display: flex;
  align-items: center;
  .ant-badge-count {
    background-color: @primary-4;
    position: initial;
    transform: initial;
    margin-left: 4px;
    transition: none;
    transform-origin: unset;
  }
}
:deep(.ant-tabs-nav) {
  .ant-tabs-tab-btn > span {
    display: flex;
    align-items: center;
    // font-size: @font-size-lg;
  }
  .ant-tag {
    margin: 0 0 0 4px;
    padding: 0 10px;
    border-radius: 12px;
    line-height: 19px;
    background-color: @table-header-bg;
    border: @table-header-bg;
  }
  .ant-tabs-tab-active {
    .ant-tag {
      color: #fff;
      background-color: @primary-color;
      border: @primary-color;
    }
  }
}
</style>
